<template>
  <div class="loginPage" >
    <div class="login">
      <img src="@/assets/imgs/login/logo.png" class="logo" @click="goFn" />
      <div  class="formWrap">
        <div v-if="one">
          <div class="text">
            欢迎注册云尘付
          </div>
          <div class="hint">
            云尘付将发送一封验证邮件到您的邮箱，此邮件将作为登录用户名
          </div>
          <el-input
            style="margin-top: 45px"
            v-model="username"
            maxlength="30"
            :placeholder="emailForget ? '请输入邮箱账号' : '请输入手机号码'"
          ></el-input>
          <div class="checkBox">
            <el-checkbox
              v-model="agreeCheck"
              style="margin-right: 10px"
            ></el-checkbox>
            <span
              >我已阅读并同意<span class="agree" @click="lookFn('服务协议')"
                >《云尘付用户服务协议》</span
              >和<span class="agree" @click="lookFn('隐私权协议')"
                >《隐私权条款》
              </span></span
            >
          </div>
          <div
            class="btn"
            style="width: 315px; margin: 40px auto 0"
            @click="handleSubmit"
            v-throttle="1000"
          >
            发送验证码
          </div>
          <div class="registerBtn registerBtn1">
            <span>已有账号？</span>
            <span class="active cursor" @click="goFn">返回首页</span>
          </div>
        </div>
        <div v-if="three">
          <div class="text">
            请设置您的登录信息
          </div>
          <div class="three_title" style="margin-top: 30px">登录密码</div>
          <el-input
            v-model="password"
            placeholder="请输入登录密码"
            show-password
            style="margin-bottom: 20px"
          ></el-input>
          <el-input
            v-model="againPassword"
            placeholder="再次确认密码"
            show-password
          ></el-input>
          <div class="hint">
            为了您的账号安全，请设置数字、大写字母、小写字母和特殊符号至少包含三种，长度至少8位不超过32位
          </div>
          <div
            class="three_title"
          >
            {{ emailForget ? "邮箱验证码" : "手机验证码" }}
          </div>
          <el-input
            v-model="registerCode"
            :placeholder="emailForget ? '请输入邮箱验证码' : '请输入手机验证码'"
            style="margin-bottom: 20px;width:180px;"
          ></el-input>
          <div
            class="hint"
            style="margin-top: 0px"
          >
            {{
              emailForget
                ? `邮箱验证码已发送到${this.username}，如果没有收到，请检查垃圾邮件`
                : `手机验证码已发送到${this.username}，如果没有收到，请检查垃圾短信`
            }}
          </div>
          <div class="three_title">
            联系人姓名
          </div>
          <el-input
            v-model="realName"
            placeholder="请输入联系人姓名"
            style="margin-bottom: 20px"
          ></el-input>
          <div
            class="btn"
            style="width: 315px; margin: 20px auto;"
            @click="handleRegister"
            v-throttle="1000"
          >
          注册
          </div>
          <br>
          <br>
          <div
            class="btn"
            @click="sendFn"
            style="width: 120px; position: absolute; left: 195px; top: 355px"
          >
            {{ send }}
          </div>
        </div>
        <div v-if="two" style="text-align: center;">
          <img src="@/assets/imgs/login/success.png" alt="" style="width:80px;height:80px">
          <div class="text" style="fontSize:28px;font-weight: 400;margin-top: 30px;">
            注册成功！
          </div>
          <div class="hint">
            请前往云尘付结算管理后台PC端进行登录试用。
            <br>
https://payment.yuncnpay.com/login
          </div>
          <div class="registerBtn registerBtn1">
            <el-button @click="goFn" style="width:120px">返回官网</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="footerText">
      © 陕西云尘付技术有限公司 陕ICP备
      <el-link
        style="position: relative; top: -2px"
        href="https://beian.miit.gov.cn/"
        target="_blank"
        >19015081号 - 3</el-link
      >
    </div> -->
  </div>
</template>
<script>
import {
  isEmail,
  isPassword,
  isMobile,
  isPerson,
  regPassNum,
} from "@/utils/validate";
import crypto from "@/crypto";
import cObj from "@/utils/config";

export default {
  name: "loginMobileVue",
  data() {
    return {
      emailForget: true,
      debounceTimer: null,
      send: "",
      username: "", // 用户名
      password: "", // 密码
      againPassword: "", // 再次确认密码
      realName: "",
      registerCode: "", // 验证码
      agreeCheck: false, // 勾选协议
      agreeCheckAcc: false, // 勾选协议-账号
      one: true, // 注册第一步
      three: false, // 注册第三步
      two:false,
    };
  },
  components: {
  },
  created() {
    this.$store.commit("resetState");
  },
  mounted() {
    window.addEventListener("keydown", this.handleKeyDown);
  },
  destroyed() {
    window.removeEventListener("keydown", this.handleKeyDown, false); //销毁回车事件
  },
  methods: {
    goFn() {
      window.open(`${cObj.littlesiteUrl}`);
    },
    lookFn() {
      window.open("/法律条款.pdf");
    },
    sendFn() {
      if (this.send == "重新发送") {
        this.$http
          .post("sys/user/sendMailCode", {
            username: this.emailForget ? this.username : null,
            codeType: 1,
            resetPwdWay: this.emailForget ? 2 : 1,
            mobile: this.emailForget ? null : this.username,
          })
          .then((res) => {
            if (res.code === "0000") {
              //  1 注册  2 修改密码
              this.$message.closeAll();
              this.$message.success("发送成功");
              var time = 60;
              this.send = time + "s 重新发送";
              var setTime = setInterval(() => {
                time = time - 1;
                this.send = time + "s 重新发送";
                if (time == 0) {
                  clearInterval(setTime);
                  this.send = "重新发送";
                }
              }, 1000);
            }
          });
      }
    },
    // 注册填写邮箱提交
    handleSubmit() {
      if (!this.agreeCheck) {
        this.$message.closeAll();
        return this.$message.warning("请勾选服务协议！");
      }
      if (this.emailForget) {
        if (!isEmail(this.username)) {
          this.$message.closeAll();
          this.$message.warning("请输入合法邮箱！");
        } else {
          // this.one = false;
          //   this.three = true
          this.$http
            .post("sys/user/sendMailCode", {
              username: this.username,
              codeType:  1,
              resetPwdWay: 2,
            })
            .then((res) => {
              if (res.code === "0000") {
                //  1 注册  2 修改密码
                this.one = false;
                this.three = true;
                this.againPassword = "";
                this.realName = "";
                this.password = "";
                this.registerCode = "";
                var time = 60;
                this.send = time + "s 重新发送";
                var setTime = setInterval(() => {
                  time = time - 1;
                  this.send = time + "s 重新发送";
                  if (time == 0) {
                    clearInterval(setTime);
                    this.send = "重新发送";
                  }
                }, 1000);
              }
            });
        }
      } else {
        if (!isMobile(this.username)) {
          this.$message.closeAll();
          this.$message.warning("请输入正确手机号码！");
        } else {
          // this.one = false;
          //   this.three = true
          this.$http
            .post("sys/user/sendMailCode", {
              codeType:  1,
              resetPwdWay: 1,
              mobile: this.username,
            })
            .then((res) => {
              if (res.code === "0000") {
                //  1 注册  2 修改密码
                this.one = false;
                this.three = true;
                this.againPassword = "";
                this.realName = "";
                this.password = "";
                this.registerCode = "";
                var time = 60;
                this.send = time + "s 重新发送";
                var setTime = setInterval(() => {
                  time = time - 1;
                  this.send = time + "s 重新发送";
                  if (time == 0) {
                    clearInterval(setTime);
                    this.send = "重新发送";
                  }
                }, 1000);
              }
            });
        }
      }
    },
    // 注册
    handleRegister() {
      if (this.password == "") {
        return this.$message.warning("密码有误");
      }
      if (this.password.indexOf(" ") > 0) {
        this.$message.closeAll();
        return this.$message.warning(
          "只能包含数字、大写字母、小写字母或特殊符号"
        );
      }
      if (this.password.length < 8 || this.password.length > 32) {
        this.$message.closeAll();
        return this.$message.warning("密码长度8-32个字符");
      }
      if (isPassword(this.password)) {
        this.$message.closeAll();
        return this.$message.warning(
          "只能包含数字、大写字母、小写字母或特殊符号"
        );
      }
      if (regPassNum(this.password) !== 3 && regPassNum(this.password) !== 4) {
        this.$message.closeAll();
        return this.$message.warning(
          "数字、大写字母、小写字母和特殊符号至少包含3种"
        );
      }

      if (this.password !== this.againPassword) {
        this.$message.closeAll();
        return this.$message.warning("两次输入密码不一致，请重新输入");
      }
      if ( !this.realName) {
        this.$message.closeAll();
        return this.$message.warning("联系人姓名必填");
      }
      if (
        (!isPerson(this.realName) || this.realName.length > 15)
      ) {
        this.$message.closeAll();
        return this.$message.warning("姓名格式不正确，且不得超过15位");
      }

        let data = {
          username: this.username,
          password: crypto.set(this.password),
          // password: md5(this.password),
          userType: "main_admin",
          registerCode: this.registerCode,
          realName: this.realName,
        };
        // 调用后台，创建商户账号，数据
        this.$http.post("/sys/user/register", data).then((res) => {
          if (res.code === "0000") {
            this.password = ""; // 密码
            this.one = false;
            this.three = false;
            this.two=true
          } else {
            // this.$message.error(this.username + " 注册失败")
          }
        });
    },
    handleKeyDown(e) {
      if (this.three) {
        if (e.keyCode === 13) {
          this.fdFn(this.handleRegister);
        }
      }else if (this.one) {
        if (e.keyCode === 13) {
          this.fdFn(this.handleSubmit);
        }
      }
    },
    fdFn(fun) {
      if (this.debounceTimer) {
        clearTimeout(this.debounceTimer);
      }
      let callNow = !this.debounceTimer; //是否立即执行
      this.debounceTimer = setTimeout(() => {
        this.debounceTimer = null;
      }, 1000);
      if (callNow) {
        fun();
      }
    },

  },
};
</script>

<style scoped lang="scss">
.send {
  width: 100%;
  height: 100vh;
  background: #fff;
}
.loginPage {
  width: 100%;
  height: 100vh;
  background: #fff;

  .footerText {
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 100vw;
  }
}
.login {
  position: relative;
  .logo {
    cursor: pointer;
    width: 120px;
    position: absolute;
    right: 30px;
    top: 30px;
  }
  .formWrap {
    width: 315px;
    margin: auto;
    position: absolute;
    left: 0;
    top: 120px;
    right: 0;
    bottom: 0;

    .active {
      color: #03bfc6;
    }
    .btn {
      height: 46px;
      line-height: 46px;
      color: #fff;
      border-radius: 6px;
      text-align: center;
      font-size: 16px;
      background: linear-gradient(to right, #03bfc6, #32e3c9);
      cursor: pointer;
    }
    .checkBox {
      color: #bfbfbf;
      margin-top: 15px;
      margin-bottom: 10px;
    }
    .agree {
      color: #3fbbbc;
      cursor: pointer;
    }
    .registerBtn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // text-align: center;
      margin-top: 60px;
      .for {
        color: #bfbfbf;
        cursor: pointer;
      }
    }
    .registerBtn1 {
      justify-content: center;
    }
    .cursor {
      cursor: pointer;
    }
  }
  .text {
    display: flex;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    color: #1d1c1c;
    span {
      margin: 0 32px;
      padding-bottom: 5px;
      border-bottom: 2px solid transparent;
      &.active {
        color: #03bfc6;
        border-color: #03bfc6;
      }
    }
    // span {
    //   &:first-child {
    //     margin-left: 96px;
    //     margin-right: 42px;
    //   }
    // }
  }
  .hint {
    font-size: 14px;
    color: #666;
    margin-top: 20px;
  }
  .forgetBox {
    position: relative;
    top: 40px;
    .forgetText {
      margin-right: 40px;
      font-size: 16px;
      display: inline-block;
      font-weight: 500;
      color: #666;
      cursor: pointer;
      &:hover {
        color: #03bfc6;
      }
    }
    .isfooterText {
      color: #03bfc6;
    }
  }
  :deep(.el-input__inner) {
    height: 46px;
  }
  .three_title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 30px;
  }
}
:deep(.el-input__inner) {
  background-color: transparent !important;
}
:deep(.el-input__inner:-webkit-autofill) {
  -webkit-text-fill-color: black !important;
  transition: background-color 5000s ease-in-out 0s;
}
</style>
